<template>
  <div class="customer-orders">
    <van-nav-bar
      :title="customerInfo?.name || '客户订单详情'"
      left-arrow
      @click-left="router.back()"
    />

    <div class="customer-info-card" v-if="customerInfo">
      <div class="customer-header">
        <div class="avatar-container">
          <img :src="customerInfo.avatar" alt="avatar">
        </div>
        <div class="customer-details">
          <div class="customer-name">{{ customerInfo.name }}</div>
          <div class="order-date">{{ formatDate(date) }}</div>
          <div class="order-count">{{ orders.length }}笔交易</div>
        </div>
      </div>
      <div class="total-amount">
        总计: <span>¥{{ totalAmount.toFixed(2) }}</span>
      </div>
    </div>

    <div class="orders-container">
      <div v-for="order in orders" :key="order.id" class="order-card">
        <div class="order-header">
          <div class="order-time">{{ order.time }}</div>
          <div class="order-id">订单 #{{ order.id }}</div>
        </div>
        
        <div class="products-list">
          <div v-for="product in order.products" :key="product.id" class="product-item">
            <div class="product-info">
              <div class="product-name">{{ product.name }}</div>
              <div class="product-quantity">x{{ product.quantity }}</div>
            </div>
            <div class="product-price">¥{{ (product.price * product.quantity).toFixed(2) }}</div>
          </div>
        </div>
        
        <div class="order-footer">
          <div class="order-total">
            小计: <span>¥{{ order.totalAmount.toFixed(2) }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'

const router = useRouter()
const route = useRoute()
const date = ref(route.params.date as string)
const customerId = ref(parseInt(route.params.customerId as string))

// 定义类型
interface Product {
  id: number;
  name: string;
  quantity: number;
  price: number;
}

interface Order {
  id: number;
  time: string;
  products: Product[];
  totalAmount: number;
}

interface CustomerInfo {
  id: number;
  name: string;
  avatar: string;
}

const customerInfo = ref<CustomerInfo | null>(null)
const orders = ref<Order[]>([])

// 计算总金额
const totalAmount = computed(() => {
  return orders.value.reduce((total, order) => total + order.totalAmount, 0)
})

// 格式化日期
const formatDate = (dateStr: string): string => {
  const today = new Date()
  today.setHours(0, 0, 0, 0)
  
  const yesterday = new Date(today)
  yesterday.setDate(yesterday.getDate() - 1)
  
  const date = new Date(dateStr)
  date.setHours(0, 0, 0, 0)
  
  if (date.getTime() === today.getTime()) {
    return '今天'
  } else if (date.getTime() === yesterday.getTime()) {
    return '昨天'
  } else {
    return dateStr
  }
}

// 从后端获取数据（这里模拟数据）
onMounted(() => {
  // 这里应该从后端API获取数据
  // 模拟数据
  customerInfo.value = {
    id: customerId.value,
    name: customerId.value === 1 ? '张大姐' : '老刘',
    avatar: `/avatars/${customerId.value}.png`
  }
  
  // 模拟订单数据
  if (customerId.value === 1 && date.value === '2024-01-20') {
    orders.value = [
      {
        id: 1,
        time: '14:30',
        products: [
          { id: 1, name: '康师傅红烧牛肉面', quantity: 2, price: 4.5 },
          { id: 2, name: '统一老坛酸菜面', quantity: 1, price: 4.0 }
        ],
        totalAmount: 13.0
      },
      {
        id: 2,
        time: '16:45',
        products: [
          { id: 3, name: '可口可乐', quantity: 1, price: 3.0 },
          { id: 4, name: '百事可乐', quantity: 1, price: 3.0 }
        ],
        totalAmount: 6.0
      }
    ]
  } else if (customerId.value === 2 && date.value === '2024-01-20') {
    orders.value = [
      {
        id: 3,
        time: '09:15',
        products: [
          { id: 5, name: '香辣方便面', quantity: 3, price: 4.0 }
        ],
        totalAmount: 12.0
      }
    ]
  } else if (customerId.value === 1 && date.value === '2024-01-19') {
    orders.value = [
      {
        id: 4,
        time: '18:30',
        products: [
          { id: 6, name: '矿泉水', quantity: 2, price: 2.0 }
        ],
        totalAmount: 4.0
      }
    ]
  }
})
</script>

<style lang="scss" scoped>
.customer-orders {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #f7f8fa;

  .customer-info-card {
    background-color: white;
    margin: 10px;
    border-radius: 10px;
    padding: 15px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);

    .customer-header {
      display: flex;
      align-items: center;
      margin-bottom: 15px;

      .avatar-container {
        width: 60px;
        height: 60px;
        margin-right: 15px;

        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          border-radius: 50%;
        }
      }

      .customer-details {
        flex: 1;

        .customer-name {
          font-size: 18px;
          font-weight: bold;
          margin-bottom: 5px;
        }

        .order-date {
          font-size: 14px;
          color: #666;
          margin-bottom: 2px;
        }

        .order-count {
          font-size: 14px;
          color: #999;
        }
      }
    }

    .total-amount {
      text-align: right;
      font-size: 16px;
      color: #666;

      span {
        font-size: 20px;
        font-weight: bold;
        color: #ee0a24;
        margin-left: 5px;
      }
    }
  }

  .orders-container {
    flex: 1;
    overflow-y: auto;
    padding: 10px;

    .order-card {
      background-color: white;
      border-radius: 10px;
      margin-bottom: 15px;
      padding: 15px;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);

      .order-header {
        display: flex;
        justify-content: space-between;
        margin-bottom: 15px;
        padding-bottom: 10px;
        border-bottom: 1px solid #eee;

        .order-time {
          font-size: 16px;
          font-weight: 500;
        }

        .order-id {
          font-size: 14px;
          color: #999;
        }
      }

      .products-list {
        .product-item {
          display: flex;
          justify-content: space-between;
          margin-bottom: 12px;

          .product-info {
            .product-name {
              font-size: 15px;
              margin-bottom: 3px;
            }

            .product-quantity {
              font-size: 13px;
              color: #666;
            }
          }

          .product-price {
            font-size: 15px;
            color: #333;
            font-weight: 500;
          }
        }
      }

      .order-footer {
        margin-top: 15px;
        padding-top: 12px;
        border-top: 1px solid #eee;

        .order-total {
          text-align: right;
          font-size: 14px;
          color: #666;

          span {
            font-size: 16px;
            font-weight: bold;
            color: #ee0a24;
            margin-left: 5px;
          }
        }
      }
    }
  }
}
</style> 